<!--国产动漫列表页面-->
<template>
	<el-space wrap :size="12">
			<el-card shadow="hover" class="warpper" v-for="item in itemList" :key="item.id" >
				<router-link :to="`/itemInfo/${item.id}`" >
				<div class="img" :style="{'background-image': 'url(' + item.img + ')'}">
					<div class="tag">
						<span class="cate">{{ item.cateName }}</span>
					</div>
				</div>
				<div class="title">
					<span>{{ item.title }}</span>
				</div>
				</router-link>
			</el-card>
	</el-space>
</template>
<script setup lang="ts">
const props = defineProps(<any>{
	itemList: Array, // 接收传递的 hotList 属性，类型为数组
});

console.log(props.itemList)

</script>

<style scoped>

:deep(.warpper){
	width: 230px;
	height: 314px;
	cursor: pointer;
}
:deep(.el-card__body){
	padding: 0px 0px;
}
.img{
	width: 100%;
	height: 280px;
	background-color: aquamarine;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("https://img-cpp.bubuman.com/uploads/allimg/230602/e56b5dd233cb56cb.jpg");
	position: relative; /* 使子元素绝对定位相对于.img */
	.tag{
		width: 100%;
		height: 20px;
		background: rgba(0, 0, 0, 0.5); /* 使用rgba设置背景颜色及不透明度 */
		position: absolute;
		bottom: 0px; /* 距离底部10px */
		left: 0; /* 根据需要调整位置 */
		right: 0; /* 根据需要调整位置 */
		display: flex; /* 使用flex布局 */
		justify-content: flex-end; /* 将内容放置到右边 */
		.cate{
			color: #fff;
			padding-right: 5px;
		}
	}
}
.title{
	padding-top: 4px;
	text-align: center;
}
</style>
